<template>
  <div class="home">
    <div class="header">
      <Head></Head>
    </div>
    <div class="container">
      <div class="warp-1">
        <PlaStatisInfo></PlaStatisInfo>
      </div>
      <div class="warp-2">
        <Map @resizeWindow="handleResize"></Map>
        <moveWord v-if="reFresh"></moveWord>
      </div>
      <div class="warp-3">
        <PlaNoticeData></PlaNoticeData>
        <PlaLineData></PlaLineData>
      </div>
    </div>
  </div>
</template>

<script>
import PlaLineData from "@/components/PlaLineData";
import PlaNoticeData from "@/components/PlaNoticeData";
import PlaStatisInfo from "@/components/PlaStatisInfo";
import moveWord from "@/components/moveWord";
import Head from "@/components/Head";
import Map from "@/components/Map";

export default {
  name: "Home",
  data(){
    return {
      reFresh:true
    }
  },
  components: {PlaLineData, PlaNoticeData, PlaStatisInfo, Head, moveWord, Map},
  mounted() {
       this.getWidth()
  },
  methods: {
    //窗口改变
    handleResize(){
      this.reFresh= false
      this.$nextTick(()=>{
        this.reFresh = true
      })
    },
    getWidth() {
       let winWidth;
  if (window.innerWidth) {
    winWidth = window.innerWidth;
  } else if ((document.body) && (document.body.clientWidth)) {
    winWidth = document.body.clientWidth;
  }
  console.log(winWidth);
}
}
}
;
</script>

<style scoped lang="less">
.home {
  height: 100vh;
  background-color: #0a1e41;
}

.header {
  height: 6.54320988vh;
}

.container {
  //max-width: calc(100vh*5/3);
  margin: 0 auto;
  height: 89.25925926vh;
  box-sizing: border-box;
  //padding: 0 1.25vw;
  display: flex;
  justify-content: space-between;
  position: relative;
  .warp-1 {
    width: 19.30555556vw;
    height: 89.46925926vh;
    position: absolute;
    //left: 1.25vw;
    left: 0;
    z-index: 999;
    padding-top: 1.4814814815vh;
  }

  .warp-2 {
    width: 100vw;
    //width: 53.95833333vw;

    //background-color: red;
  }

  .warp-3 {
    width: 19.30555556vw;
    height: 89.46925926vh;
    position: absolute;
    //right: 1.25vw;
    right: 0;
    padding-top: 1.4814814815vh;
    z-index: 999;
    //background-color: aquamarine;
  }
}
</style>